原文地址：https://www.jb51.net/article/146249.htm

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

1

2

现在发现这个键盘事件好像对input框支持比较好，其他的元素多少会有点问题，或者直接无效，究其原因是其他的元素没有获取焦点或者没有键盘事件。

我现在的解决方式，

如果是没有键盘事件使用css把input框绝对定位到需要绑定键盘事件的元素之上并且把input框设置为透明，把该input框与原来要绑定键盘事件的元素进行绑定，达到效果；

test.vue

1

2

3

4

5

 div内容

 X

css：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

div.container{

 position:relative;

}

.item{

 position:absolute;

 top:0;

 left:0;

 width:100px;

 height:100px;

 border:1px solid #ccc;

}

.opa{

 opacity:0;

 z-index:5;

}

span{

 position:absolute;

 top:5px;

 right:5px;

 z-index:10;

}

js：

?

1

2

3

4

5

methods:{

 deleteDiv(){

 alert("delete");

 }

}

如果是没有获取焦点，则可以写一个自定义指令自动获取焦点，

自动获取焦点自定义指令见我另一篇文章 点击进入

拓展知识：vuejs 2.0 键盘事件详解

如下所示：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

 window.onload = function(){

  var vm = new Vue({

  el:'#box',

  methods:{

   show:function(ev){

   if(ev.keyCode == 13){

    alert('你按回车键了');

   }

   },

  }

  });

 }

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

两个input的效果都是一样的 如果安13 也就是按键 enter 才会执行弹窗！！

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键